<template>
	<div>
		<Test
			v-for="(item, key) in datas"
			:key="`11-${item.id}-${key}`"
			:item="item"
			@remove="remove"
		></Test>
		<h1>{{ count }}</h1>
	</div>
</template>

<script>
import {
	onMounted,
	onBeforeMount,
	onBeforeUpdate,
	onUpdated,
	onErrorCaptured,
	getCurrentInstance,
	onRenderTracked,
	onRenderTriggered,
	watchEffect,
	ref,
} from 'vue'
import Test from './components/Test.vue'

export default {
	name: 'App',
	components: {
		Test,
	},
	setup(props, ctx) {
		const count = ref(0)
		const datas = ref([
			{
				id: 1,
				title: '第一项',
			},
			{
				id: 2,
				title: '第二项',
			},
		])

		setTimeout(() => {
			count.value = 1
		}, 2000)
		console.log('setup')

		onBeforeMount(() => {
			console.log('onBeforeMounted')
		})

		onMounted(() => {
			console.log('onMounted')
		})

		onUpdated(() => {
			// 一定会在 watchEffect 之后执行
			console.log('onUpdate')
		})

		onBeforeUpdate(() => {
			console.log('onBeforeUpdate')
		})

		watchEffect(
			() => {
				const a = count.value
				console.log('watchEffect')
			},
			{
				flush: 'post', //
				onTrigger(e) {},
				onTrack(e) {},
			}
		)

		onErrorCaptured((e) => {
			console.log(1, e)
		})

		// 当前只要 render 就会执行
		onRenderTracked(() => {
			// debugger
		})

		// 当重绘时候
		onRenderTriggered(() => {
			debugger
		})

		const remove = (id) => {
			console.log(id, '执行')
			datas.value = datas.value.filter((item) => {
				if (item.id !== id) {
					return item
				}
			})
		}

		return {
			count,
			datas,
			remove,
		}
	},
}
</script>

<style scoped></style>
